<!--
 * @Author: delin66
 * @Date: 2025-01-06 15:56:02
 * @LastEditors: delin66
 * @LastEditTime: 2025-01-07 17:45:17
 * @Descripttion: 
-->
<template>
  <div class="container">
    <div class="header">通知公告</div>
    <div class="notice-list">
      <ul>
        <li v-for="item in noticeList" :key="item.id" @click="toNoticeDetail(item.id)">
          <span class="title ellipsis">
            {{ item.title }}
          </span>
          <span class="create-time">{{ item.createTime?.split(' ')[0] ?? '-' }}</span>
        </li>
      </ul>
      <el-empty v-if="total === 0" description="没有通知公告" />
      <el-pagination
        background
        class="m-t-10 m-b-10"
        style="justify-content: flex-end"
        layout="prev, pager, next"
        :page-count="pages"
        :page-size="10"
        v-model:current-page="current"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { getAnnouncement } from '@/api/park';
import { ref, reactive, onMounted } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();

const total = ref(0);
const pages = ref(0)
const current = ref<number>(1);
// 获取公告列表
const noticeList = ref();

// 跳转详情
function toNoticeDetail(id: string | number) {
  const { href } = router.resolve({
    name: 'noticeDetail',
    query: {
      id,
    },
  });
  window.open(href, '_blank');
}

function getNoticeList() {
  const query = { current: current.value, size: 12,type:0 ,status:1};
  getAnnouncement(query).then((res: any) => {
    if (res.code === 200) {
      noticeList.value = res.data?.records;
      total.value = res.data?.total;
      pages.value = res.data?.pages
    }
  });
}

// 分页
function handleCurrentChange(val: number) {
  current.value = val;
  getNoticeList();
}
onMounted(() => {
  getNoticeList();
});
</script>

<style scoped lang="scss">
.container {
  width: 100%;
  padding: 20px;
}
.header {
  font-size: 25px;
  font-weight: bold;
  margin-bottom: 20px;
}
.notice-list {
  flex: 1;
  width: 100%;
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  li {
    position: relative;
    padding: 0 5%;
    margin-bottom: 5px;
    display: flex;
    justify-content: space-between;
    &::before {
      content: '';
      position: absolute;
      width: 5px;
      height: 5px;
      background-color: #338ccb;
      top: 50%;
      left: 2.5%;
      transform: translate(-50%, -50%);
    }
    .title {
      max-width: 85%;
      font-size: 18px;
      &:hover {
        cursor: pointer;
        color: #338ccb;
      }
    }
  }
}
</style>
